<script setup>
import { reactive } from 'vue'
const state = reactive({
  list: [
    { id: 1, name: '吃饭', doned: true },
    { id: 2, name: '睡觉', doned: false },
    { id: 3, name: '打豆豆', doned: true },
  ],
})
</script>
<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus />
    </header>

    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 有 completed 就划线 -->
        <li
          :class="{
            // 右边为 true，就是用左边的 class
            completed: item.doned,
          }"
          v-for="item in state.list"
          :key="item.id"
        >
          <div class="view">
            <!-- v-model 对应的值是 true，就会自动打钩，内部会把 checked 变为 true -->
            <input class="toggle" type="checkbox" v-model="item.doned" />
            <label>{{ item.name }}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count"><strong>0</strong> item left</span>
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button class="clear-completed">Clear completed</button>
    </footer>
  </section>
</template>
